import React, { Component } from 'react'
import Pubsub from 'pubsub-js'
import './index.css'
export default class index extends Component {
    constructor(props){
        super(props)
        this.state={
            users:[],
            isFirst:true, //是否为第一次打开页面
            isLoging:false, //标识是否处于加载中
            err:"" //存储请求相关的错误信息
        }
    }
    componentDidMount(){
        Pubsub.subscribe('at',(_,stateObj)=>{
            this.setState(stateObj)
        })
    }
    render() {
        const {users,isFirst,isLoging,err} = this.state
        
        return (

            <div className="row">

                {   isFirst?<h1>欢迎</h1>:
                    isLoging?<h2>loagind...</h2>:
                    err? <h2 style={{color:'red'}}>{err}</h2>:
                    users.map((usersObj) => {
                            return (
                                <div className="card" key={usersObj.id}>
                                    <a href={usersObj.html_url} target="_blank" rel="noreferrer">
                                        <img alt='head' src={usersObj.avatar_url} style={{ width: '100px' }} />
                                    </a>
                                    <p className="card-text">{usersObj.login}</p>
                                </div>
                            )
                        }
                    )
                /* {
                    this.props.users.map(
                        (usersObj) => {
                            return(
                            <div className="card">
                                <a href={usersObj.html_url} target="_blank" rel="noreferrer">
                                    <img alt='head' src={usersObj.avatat_url} style={{ width: '100px' }} />
                                </a>
                                <p className="card-text">{usersObj.login}</p>
                            </div>
                            )
                        }
                    )
                } */}

            </div>

        )
    }
}
